<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card style="width: 100%; padding: 0">
          <template #header>
            <div class="card-header">
              <span>环境情况</span>
            </div>
          </template>
          <div class="content">
            <div style="width: 100%; height: 190px" id="echarts1"></div>
            <div style="width: 100%; height: 190px" id="echarts2"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div class="card-header">
              <span>树木年龄结构</span>
            </div>
          </template>
          <div class="content">
            <div style="width: 100%; height: 300px" id="echarts3"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div class="card-header">
              <span>隐患分析</span>
            </div>
          </template>
          <div class="content">
            <div style="width: 100%; height: 220px" id="echarts4"></div>
            <div style="width: 100%; height: 220px" id="echarts5"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
  import { onMounted } from 'vue'
  import * as echarts from 'echarts'

  const getEcharts1 = () => {
    const myChart1 = echarts.init(document.getElementById('echarts1'))
    myChart1.setOption({
      title: {
        text: '温度变化',
        left: 'center',
        textStyle: {
          fontSize: 16,
          color: '#333',
          fontWeight: 'bold'
        }
      },
      tooltip: {},
      xAxis: {
        data: ['12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 22, 28, 23, 19, 28, 23, 19, 10],
          type: 'line',
          smooth: true,
          areaStyle: {
            color: '#75bdae'
          }
        },
        {
          data: [23, 35, 10, 25, 14, 25, 14, 23, 35, 10],
          type: 'line',
          areaStyle: {
            color: '#66bc89',
            opacity: 0.5
          },
          smooth: true
        }
      ]
    })
  }
  const getEcharts2 = () => {
    const myChart2 = echarts.init(document.getElementById('echarts2'))
    myChart2.setOption({
      title: {
        text: '湿度变化',
        left: 'center',
        textStyle: {
          fontSize: 16,
          color: '#333',
          fontWeight: 'bold'
        }
      },
      tooltip: {},
      xAxis: {
        data: ['12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30']
      },
      yAxis: {},
      series: [
        {
          data: [19, 10, 22, 28, 23, 23, 28, 10, 22, 19],
          type: 'line',
          smooth: true,
          areaStyle: {
            color: '#409772'
          }
        },
        {
          data: [23, 35, 35, 25, 14, 23, 10, 25, 14, 10],
          type: 'line',
          areaStyle: {
            color: '#f6ae88',
            opacity: 0.5
          },
          smooth: true
        }
      ]
    })
  }
  const getEcharts3 = () => {
    const myChart3 = echarts.init(document.getElementById('echarts3'))
    myChart3.setOption({
      title: {
        text: '年龄结构',
        left: 'center',
        top: 'center'
      },
      tooltip: {},
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 335,
              name: '成熟林'
            },
            {
              value: 234,
              name: '幼林'
            },
            {
              value: 1548,
              name: '中龄林'
            }
          ],
          radius: ['40%', '70%']
        }
      ]
    })
  }
  const getEcharts4 = () => {
    const myChart4 = echarts.init(document.getElementById('echarts4'))
    myChart4.setOption({
      title: {
        text: '火\n灾\n隐\n患\n分\n析',
        padding: [0, 0, 10, 0],
        left: '0%',
        top: 'center',
        textStyle: {
          fontSize: 16,
          color: '#333',
          fontWeight: 'bold'
        }
      },
      tooltip: {
        formatter: '{b} : {c}%'
      },
      xAxis: {
        data: ['6月', '7月', '8月', '9月', '10月']
      },
      yAxis: {},
      series: [
        {
          data: [7, 10, 12, 9, 8],
          type: 'line',
          smooth: true,
          color: '#f5876e'
        }
      ]
    })
  }
  const getEcharts5 = () => {
    const myChart5 = echarts.init(document.getElementById('echarts5'))
    myChart5.setOption({
      title: {
        text: '虫\n害\n隐\n患\n分\n析',
        padding: [0, 0, 10, 0],
        left: '0%',
        top: 'center',
        textStyle: {
          fontSize: 16,
          color: '#333',
          fontWeight: 'bold'
        }
      },
      tooltip: {
        formatter: '{b} : {c}%'
      },
      xAxis: {
        data: ['6月', '7月', '8月', '9月', '10月']
      },
      yAxis: {},
      series: [
        {
          data: [12, 28, 18, 12, 9],
          type: 'line',
          smooth: true,
          color: '#78bd90'
        }
      ]
    })
  }
  onMounted(() => {
    getEcharts1()
    getEcharts2()
    getEcharts3()
    getEcharts4()
    getEcharts5()
  })
</script>

<style scoped>
  :deep(.el-card__body) {
    padding: 0;
  }

  .home {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .content {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }
</style>
